<template>
	<div class="theContent">
		<contentTitle title="农产品分布情况">	
			<btnList :data="buttonList" :cur.sync="type" @onClick="onTypeChanged"></btnList>
		</contentTitle>
		<contentBox class="theEchart">
			<pieRingChart ref="pieRingChart"
				:seriesDataList="seriesDataList"
				:unit="unit"
				:colorList="colorList"
			/>
		</contentBox>
	</div>
</template>

<script>
import contentBox from "@/components/contentBox.vue"
import contentTitle from "@/components/contentTitle.vue"
import btnList from '@/components/btnList.vue'
import pieRingChart from '@/components/pieRingChart.vue'
import { listByCategory } from '@/api/home.js';
export default {
	components: {
		contentBox,contentTitle,btnList,pieRingChart
	},
	data() {
		return {
			listPlant: [],
			listSale: [],
			type:1, //1 面积  2-产值 
			buttonList:[{value:1,label:'面积'},{value:2,label:'产值'}],
			option: {},
			colorList:['#0198F3', '#F7931A', '#00CE7D', '#884FFC'],
			loading: false,
			timer: null			
		};
	},
	computed:{		
		categoryListOfAmount(){
			return this.listSale.map(item=>{
				return {name:item.categoryName,value:item.amount,percent:item.amountPercent}
			})
		},
		categoryListOfAcreage(){
			return this.listPlant.map(item=>{
				return {name:item.categoryName,value:item.acreage,percent:item.acreagePercent}
			})
		},
		seriesDataList(){
			return this.type==1 ? this.categoryListOfAcreage : this.categoryListOfAmount
		},
		unit(){
			return this.type==1 ? '亩': '万元'
		},
	},	
	mounted() {
		this.loadData();
		//this.switper(); //暂时关闭
	},
	beforeDestroy() {
		this.clearData();
	},
	methods: {
		clearData() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		loadData() {
			this.loading = false;
			listByCategory({ year: '2023' }).then(result => {
			 console.log('listByCategory Result = ', result);
				this.listPlant = result.listPlant;	
				this.listSale  = result.listSale;
				
				//计算百分比值
				let acreageTotal = eval(this.listPlant.map(item => item.acreage).join('+'))
				let countTotal = eval(this.listSale.map(item => item.count).join('+'))
				let amountTotal = eval(this.listSale.map(item => item.amount).join('+'))
				this.listPlant.forEach(item=>{
					item.acreagePercent = (item.acreage * 100 / acreageTotal).toFixed(2) + "%"					
				})
				this.listSale.forEach(item=>{					
					item.countPercent = (item.count * 100 / countTotal).toFixed(2) + "%"
					item.amountPercent = (item.amount * 100 / amountTotal).toFixed(2) + "%"
				})
				
				this.$nextTick(() => {
					this.onTypeChanged();
				});
				this.loading = true;
			});
		},
		//轮询 暂时保留
		switper() {
			if (this.timer) {
				return;
			}
			let looper = () => {
				this.loadData();
			};
			this.timer = setInterval(looper, this.$store.state.settings.echartsAutoTime);
		},

		onTypeChanged(){
			//通过参数绑定传值  :cur.sync="type" 
			this.$refs.pieRingChart.initOption()
		}
	}
};
</script>
<style lang="scss" scoped>
.theContent {	
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap:20px;
	
	.theEchart {
		flex:1;
	}
	.theButton{
		margin: 0 10px;
		font-size: 20px;		
		line-height: 38px;
		color: #FFFFFF;
		text-align: center;
		cursor: pointer;			
	}
	.active{
		background: linear-gradient(180deg, rgba(247,147,26,0) 0%, rgba(247,147,26,0.4) 100%);
	}
}	
</style>
